<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"
 lang="en" dir="ltr">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><link rel="stylesheet" href="../codebase/default.css" type="text/css" media="screen" title="no title" charset="utf-8"><title>
    dhtmlxtree:syntax_templates    [Skin test wiki]
  </title></head>

<body>
<div class="dokuwiki">
  
  <div class="stylehead">

    <div class="header">
    <a class="logo" href="http://dhtmlx.com" title="DHTMLX Documentation homepage"></a>
    <span class="tittle-dhtmlx">DHTMLX Docs & Samples Explorer</span>

    <div class="search-field">
        <form action="http://dhtmlx.com/dhxdocs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>    </div>
        <div class="buttons">
                <a class="doc"></a>
                <a title="DHTMLX Samples homepage" href="../samples.html" class="sample"/></a>
        </div>
     <!-- <div class="pagename">
        [[<a href="#"  title="Backlinks">dhtmlxtree:syntax_templates</a>]]
      </div>
      <div class="logo">
        <a href="/dhtmlx/_lab/wiki/doku.php"  name="dokuwiki__top" id="dokuwiki__top" accesskey="h" title="[H]">Skin test wiki</a>      </div>

      <div class="clearer"></div>-->
        
    </div>

    
<!--   <div class="bar" id="bar__top">
      <div class="bar-left" id="bar__topleft">
                <form class="button btn_revs" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:syntax_templates" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>      </div>

      <div class="bar-right" id="bar__topright">
        <form class="button btn_recent" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="recent" /><input type="hidden" name="id" value="dhtmlxtree:syntax_templates" /><input type="submit" value="Recent changes" class="button" accesskey="r" title="Recent changes [R]" /></div></form>        <form action="http://dhtmlx.com/dhxdocs/doku.php" accept-charset="utf-8" id="dw__search"><div class="no"><input type="hidden" name="do" value="search" /><input type="text" id="qsearch__in" accesskey="f" name="id" title="Search" /><button type="submit"></button><div id="qsearch__out" class="ajax_qsearch JSpopup"></div></div></form>&nbsp;
      </div>

      <div class="clearer"></div>
    </div> -->

<!--        <div class="breadcrumbs">
      <span class="bchead">Trace:</span> <span class="bcsep">&raquo;</span> <span class="curid"><a href="/dhtmlx/_lab/wiki/doku.php?id=dhtmlxtree:syntax_templates"  class="breadcrumbs" title="dhtmlxtree:syntax_templates">syntax_templates</a></span>    </div>
    -->

    
  </div>
  
  
  <div class="page">
    <!-- wikipage start -->
    <!-- TOC START -->
<div class="toc">
<div class="tocheader toctoggle" id="toc__header">Table of Contents</div>
<div id="toc__inside">

<ul class="toc">
<li class="clear">

<ul class="toc">
<li class="level2"><div class="li"><span class="li"><a href="#syntax_templates" class="toc">Syntax Templates</a></span></div>
<ul class="toc">
<li class="level3"><div class="li"><span class="li"><a href="#xml_format_template" class="toc">XML Format Template</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#json_format_template" class="toc">JSON Format Template</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#csv_format_template" class="toc">CSV Format Template</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#js_array_format_template" class="toc">JS Array Format Template</a></span></div></li>
<li class="level3"><div class="li"><span class="li"><a href="#cold_fusion_tag_for_dhtmlxtree" class="toc">Cold Fusion Tag for dhtmlXTree</a></span></div></li></ul>
</li></ul>
</li></ul>
</div>
</div>
<!-- TOC END -->

<p>
<div class='backlinks'><div class='backlink last_backlink'><img src="icons___file.gif"  class="media" alt="" /><a href="../index.html" class="wikilink1" title="start">Index</a></div><div class='arrow'></div><div class='backlink last_backlink'><img src="icons___tree.gif"  class="media" alt="" /><a href="index.html" class="wikilink1" title="dhtmlxtree:toc">dhtmlxtree</a></div><div class='arrow'></div><div class='backlink'><span class="curid"><a href="dhtmlxtree___syntax_templates.html" class="wikilink1" title="dhtmlxtree:syntax_templates">  Syntax Templates  </a></span></div></div>

</p>

<h2><a name="syntax_templates" id="syntax_templates">Syntax Templates</a></h2>
<div class="level2">

</div>

<h3><a name="xml_format_template" id="xml_format_template">XML Format Template</a></h3>
<div class="level3">

<p>
<acronym title="Extensible Markup Language">XML</acronym> syntax template is the following:

</p>
<pre class="code javascript">      <span class="sy0">&lt;?</span>xml version<span class="sy0">=</span><span class="st0">'1.0'</span> encoding<span class="sy0">=</span><span class="st0">'iso-8859-1'</span><span class="sy0">?&gt;</span>
          <span class="sy0">&lt;</span>tree id<span class="sy0">=</span><span class="st0">&quot;0&quot;</span><span class="sy0">&gt;</span> 
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;My Computer&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;1&quot;</span> child<span class="sy0">=</span><span class="st0">&quot;1&quot;</span> im0<span class="sy0">=</span><span class="st0">&quot;my_cmp.gif&quot;</span> im1<span class="sy0">=</span><span class="st0">&quot;my_cmp.gif&quot;</span> im2<span class="sy0">=</span><span class="st0">&quot;my_cmp.gif&quot;</span> call<span class="sy0">=</span><span class="st0">&quot;true&quot;</span> select<span class="sy0">=</span><span class="st0">&quot;yes&quot;</span><span class="sy0">&gt;</span> 
                  <span class="sy0">&lt;</span>userdata <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;system&quot;</span><span class="sy0">&gt;</span>true<span class="sy0">&lt;/</span>userdata<span class="sy0">&gt;</span> 
                  <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Floppy (A:)&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;11&quot;</span> child<span class="sy0">=</span><span class="st0">&quot;0&quot;</span> im0<span class="sy0">=</span><span class="st0">&quot;flop.gif&quot;</span> im1<span class="sy0">=</span><span class="st0">&quot;flop.gif&quot;</span> im2<span class="sy0">=</span><span class="st0">&quot;flop.gif&quot;</span><span class="sy0">/&gt;</span> 
                  <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Local Disk (C:)&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;12&quot;</span> child<span class="sy0">=</span><span class="st0">&quot;0&quot;</span> im0<span class="sy0">=</span><span class="st0">&quot;drv.gif&quot;</span> im1<span class="sy0">=</span><span class="st0">&quot;drv.gif&quot;</span> im2<span class="sy0">=</span><span class="st0">&quot;drv.gif&quot;</span><span class="sy0">/&gt;</span> 
              <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span> 
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Recycle Bin&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;4&quot;</span> child<span class="sy0">=</span><span class="st0">&quot;0&quot;</span> im0<span class="sy0">=</span><span class="st0">&quot;recyc.gif&quot;</span> im1<span class="sy0">=</span><span class="st0">&quot;recyc.gif&quot;</span> im2<span class="sy0">=</span><span class="st0">&quot;recyc.gif&quot;</span><span class="sy0">/&gt;</span>
      <span class="sy0">&lt;/</span>tree<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The tags used are the following:
</p>
<ul>
<li class="level1"><div class="li">  &lt;tree&gt; tag is mandatory. It specifies the parent of loading block of data. According to this, its id parameter specifies the ID of that parent. To load root level the user needs to specify the ID used for creation of the tree object: new myObjTree(boxObject,width,height,0);</div>
</li>
<li class="level1"><div class="li">  &lt;item&gt; tag can contain sub-items (in order to load more than one level at once) or not. It also can contain &lt;itemtext&gt; tag that can be used to add some <acronym title="HyperText Markup Language">HTML</acronym> to item label (attribute text should be skipped then):</div>
</li>
</ul>
<pre class="code javascript">      <span class="sy0">&lt;</span>item id<span class="sy0">=</span><span class="st0">&quot;123&quot;</span><span class="sy0">&gt;</span>
          <span class="sy0">&lt;</span>itemtext<span class="sy0">&gt;&lt;!</span><span class="br0">&#91;</span>CDATA<span class="br0">&#91;</span><span class="sy0">&lt;</span>font color<span class="sy0">=</span><span class="st0">&quot;red&quot;</span><span class="sy0">&gt;</span>Label<span class="sy0">&lt;/</span>font<span class="sy0">&gt;</span><span class="br0">&#93;</span><span class="br0">&#93;</span><span class="sy0">&gt;&lt;/</span>itemtext<span class="sy0">&gt;</span>
      <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

Attributes for &lt;item&gt; tag are the following:
</p>
<ul>
<li class="level1"><div class="li">  Mandatory attributes:</div>
<ul>
<li class="level2"><div class="li">  text - label of the node;</div>
</li>
<li class="level2"><div class="li">  id - id of the node;</div>
</li>
</ul>
</li>
<li class="level1"><div class="li">  Optional attributes:</div>
<ul>
<li class="level2"><div class="li">  tooltip - tooltip of the node;</div>
</li>
<li class="level2"><div class="li">  im0 - image for a node without child items (tree will get images from the path specified in setImagePath() method);</div>
</li>
<li class="level2"><div class="li">  im1 - image for an expanded node with child items;</div>
</li>
<li class="level2"><div class="li">  im2 - image for a collapsed node with child items;</div>
</li>
<li class="level2"><div class="li">  aCol - colour of an item that is not selected;</div>
</li>
<li class="level2"><div class="li">  sCol - colour of a selected item;</div>
</li>
<li class="level2"><div class="li">  select - select a node on load (any value);</div>
</li>
<li class="level2"><div class="li">  style - text style of a node;</div>
</li>
<li class="level2"><div class="li">  open - show a node opened (any value);</div>
</li>
<li class="level2"><div class="li">  call - call function on select(any value);</div>
</li>
<li class="level2"><div class="li">  checked - check checkbox if exists (any value);</div>
</li>
<li class="level2"><div class="li">  child - specifies whether a node has child items (1) or not (0);</div>
</li>
<li class="level2"><div class="li">  imheight - height of the icon;</div>
</li>
<li class="level2"><div class="li">  imwidth - width of the icon;</div>
</li>
<li class="level2"><div class="li">  topoffset - offset of the item from the node above;</div>
</li>
<li class="level2"><div class="li">  radio - if not empty, child items of this node will have radio buttons.</div>
</li>
</ul>
</li>
</ul>

<p>
To set userdata directly within <acronym title="Extensible Markup Language">XML</acronym>, the user should apply &lt;userdata&gt; tag that has only one attribute - name, and value to specify userdata value.
</p>

<p>
In <acronym title="Hypertext Preprocessor">PHP</acronym> script the following code should be used for the page header:

</p>
<pre class="code javascript">      <span class="sy0">&lt;?</span>php
             header<span class="br0">&#40;</span><span class="st0">&quot;Content-type: text/xml&quot;</span><span class="br0">&#41;</span>;
             echo<span class="br0">&#40;</span><span class="st0">'&lt;?xml version=&quot;1.0&quot; encoding=&quot;iso-8859-1&quot; ?&gt;'</span><span class="br0">&#41;</span>;
&nbsp;</pre>
</div>

<h4><a name="xml_format_with_links_specified" id="xml_format_with_links_specified">XML Format with Links Specified</a></h4>
<div class="level4">

<p>

<acronym title="Extensible Markup Language">XML</acronym> format template for the tree containing links:

</p>
<pre class="code javascript">      <span class="sy0">&lt;</span>tree..<span class="sy0">&gt;</span>
               <span class="sy0">&lt;</span>item ...<span class="sy0">&gt;</span>
                      <span class="sy0">&lt;</span>userdata <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;myurl&quot;</span><span class="sy0">&gt;</span>http<span class="sy0">:</span><span class="co1">//www.google.com&lt;/userdata&gt;</span>
                      <span class="sy0">&lt;</span>item ...<span class="sy0">&gt;</span>
                              <span class="sy0">&lt;</span>userdata <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;myurl&quot;</span><span class="sy0">&gt;</span>http<span class="sy0">:</span><span class="co1">//groups.google.com&lt;/userdata&gt;</span>
                      <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
&nbsp;
                <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
&nbsp;
&nbsp;</pre>
</div>

<h3><a name="json_format_template" id="json_format_template">JSON Format Template</a></h3>
<div class="level3">

<p>
The structure of JSON template is like the one of <acronym title="Extensible Markup Language">XML</acronym>, where tags are transformed to objects, and attributes to properties.

</p>
<pre class="code javascript">      <span class="br0">&#123;</span>id<span class="sy0">:</span>0<span class="sy0">,</span>
          <span class="kw1">item</span><span class="sy0">:</span><span class="br0">&#91;</span>
              <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="nu0">1</span><span class="sy0">,</span>text<span class="sy0">:</span><span class="st0">&quot;first&quot;</span><span class="br0">&#125;</span><span class="sy0">,</span>
              <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="nu0">2</span><span class="sy0">,</span> text<span class="sy0">:</span><span class="st0">&quot;middle&quot;</span><span class="sy0">,</span>
                  <span class="kw1">item</span><span class="sy0">:</span><span class="br0">&#91;</span>
                      <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="st0">&quot;21&quot;</span><span class="sy0">,</span> text<span class="sy0">:</span><span class="st0">&quot;child&quot;</span><span class="br0">&#125;</span>
                  <span class="br0">&#93;</span><span class="br0">&#125;</span><span class="sy0">,</span>
              <span class="br0">&#123;</span>id<span class="sy0">:</span><span class="nu0">3</span><span class="sy0">,</span>text<span class="sy0">:</span><span class="st0">&quot;last&quot;</span><span class="br0">&#125;</span>
          <span class="br0">&#93;</span>
      <span class="br0">&#125;</span>
&nbsp;</pre>
</div>

<h3><a name="csv_format_template" id="csv_format_template">CSV Format Template</a></h3>
<div class="level3">

<p>
A tree item is represented with three values - id, parent_id, text.
</p>

<p>
For example:

</p>
<pre class="code javascript">      <span class="nu0">1</span><span class="sy0">,</span>0<span class="sy0">,</span>node <span class="nu0">1</span>
      <span class="nu0">2</span><span class="sy0">,</span><span class="nu0">1</span><span class="sy0">,</span>node <span class="nu0">1.1</span>
      <span class="nu0">3</span><span class="sy0">,</span><span class="nu0">2</span><span class="sy0">,</span>node 1.1.1
      <span class="nu0">4</span><span class="sy0">,</span>0<span class="sy0">,</span>node <span class="nu0">2</span>
&nbsp;</pre>
</div>

<h3><a name="js_array_format_template" id="js_array_format_template">JS Array Format Template</a></h3>
<div class="level3">

<p>
Tree item is represented with three values as sub-arrays of the top array - id, parent_id, text.
</p>

<p>
For example:

</p>
<pre class="code javascript">      <span class="kw2">var</span> treeArray <span class="sy0">=</span> <span class="kw2">new</span> Array<span class="br0">&#40;</span>
      <span class="br0">&#91;</span><span class="st0">&quot;1&quot;</span><span class="sy0">,</span><span class="st0">&quot;0&quot;</span><span class="sy0">,</span><span class="st0">&quot;node 1&quot;</span><span class="br0">&#93;</span><span class="sy0">,</span>
      <span class="br0">&#91;</span><span class="st0">&quot;2&quot;</span><span class="sy0">,</span><span class="st0">&quot;1&quot;</span><span class="sy0">,</span><span class="st0">&quot;node 1.1&quot;</span><span class="br0">&#93;</span><span class="sy0">,</span>
      <span class="br0">&#91;</span><span class="st0">&quot;3&quot;</span><span class="sy0">,</span><span class="st0">&quot;2&quot;</span><span class="sy0">,</span><span class="st0">&quot;node 1.1.1&quot;</span><span class="br0">&#93;</span><span class="sy0">,</span>
      <span class="br0">&#91;</span><span class="st0">&quot;4&quot;</span><span class="sy0">,</span><span class="st0">&quot;0&quot;</span><span class="sy0">,</span><span class="st0">&quot;node 2&quot;</span><span class="br0">&#93;</span>
      <span class="br0">&#41;</span>
&nbsp;</pre>
</div>

<h3><a name="cold_fusion_tag_for_dhtmlxtree" id="cold_fusion_tag_for_dhtmlxtree">Cold Fusion Tag for dhtmlXTree</a></h3>
<div class="level3">

<p>
This section is devoted to a ready-made ColdFusion solution for the tree that, as it is believed by some users, simplifies usage of dhtmlxTree. For example:

</p>
<pre class="code javascript">      <span class="sy0">&lt;</span>cf_dhtmlXTree
          <span class="kw3">name</span><span class="sy0">=</span><span class="st0">&quot;tree&quot;</span>
          width<span class="sy0">=</span><span class="st0">&quot;250&quot;</span>
          height<span class="sy0">=</span><span class="st0">&quot;250&quot;</span>
          JSPath<span class="sy0">=</span><span class="st0">&quot;../&quot;</span> CSSPath<span class="sy0">=</span><span class="st0">&quot;../&quot;</span>
          iconspath<span class="sy0">=</span><span class="st0">&quot;gfx/&quot;</span>
          xmldoc<span class="sy0">=</span><span class="st0">&quot;tree.xml&quot;</span>
          checkboxes<span class="sy0">=</span><span class="st0">&quot;false&quot;</span>
          dragndrop<span class="sy0">=</span><span class="st0">&quot;true&quot;</span>
          style<span class="sy0">=</span><span class="st0">&quot;background-color:whitesmoke;border:1px solid blue;&quot;</span>
          onSelect<span class="sy0">=</span><span class="st0">&quot;onNodeSelect&quot;</span>
          onDrop<span class="sy0">=</span><span class="st0">&quot;onDropNode&quot;</span><span class="sy0">&gt;</span>
                   ...<span class="me1">configuration</span> xml...
      <span class="sy0">&lt;/</span>cf_dhtmlXTree<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The parameters that should be indicated are as follows:
</p>
<ul>
<li class="level1"><div class="li">  name - [optional] name of the tree <acronym title="JavaScript">JS</acronym> object to use in JavaScript; if omitted, then name will be generated automatically;</div>
</li>
<li class="level1"><div class="li">  width - [optional] width of the tree (it sets the with of the tree box, leaving the width of the tree itself by 100%);</div>
</li>
<li class="level1"><div class="li">  height - [optional] height of the tree;</div>
</li>
<li class="level1"><div class="li">  JSPath - [optional] absolute or relative path to the directory containing tree <acronym title="JavaScript">JS</acronym> files; “js” directory by default;</div>
</li>
<li class="level1"><div class="li">  CSSPath - [optional] absolute or relative path to the directory containing tree <acronym title="Cascading Style Sheets">CSS</acronym> files; “css” directory by default;</div>
</li>
<li class="level1"><div class="li">  iconspath - [optional] absolute or relative path to the directory containing tree icon files; “img” directory by default;</div>
</li>
<li class="level1"><div class="li">  xmldoc - [mandatory for xml loading] <acronym title="Uniform Resource Locator">URL</acronym> of the <acronym title="Extensible Markup Language">XML</acronym> file used to load levels dynamically;</div>
</li>
<li class="level1"><div class="li">  checkboxes - [optional] show checkboxes (none, twoState, threeState);</div>
</li>
<li class="level1"><div class="li">  dragndrop - [optional] activate drag-&amp;amp;-drop (true,false);</div>
</li>
<li class="level1"><div class="li">  style - [optional] style for the tree box;</div>
</li>
<li class="level1"><div class="li">  onSelect - [optional] JavaScript function to be called on node selection;</div>
</li>
<li class="level1"><div class="li">  oncheck - [optional] JavaScript function to be called on node (un)checking;</div>
</li>
<li class="level1"><div class="li">  onDrop - [optional] JavaScript function to be called on node drop;</div>
</li>
<li class="level1"><div class="li">  im1 - [optional] default image used for child nodes;</div>
</li>
<li class="level1"><div class="li">  im2 - [optional] default image used for expanded branches;</div>
</li>
<li class="level1"><div class="li">  im3 - [optional] default image used for collapsed branches.</div>
</li>
</ul>

<p>
Please, refer to <a href="dhtmlxtree___initialization_of_dhtmlxtree.html" class="wikilink1" title="dhtmlxtree:initialization_of_dhtmlxtree">Data Loading from XML</a> section.
</p>

<p>
Minimal possible tag syntax with on-page <acronym title="Extensible Markup Language">XML</acronym> is the following:

</p>
<pre class="code javascript">      <span class="sy0">&lt;</span>cf_dhtmlXTree<span class="sy0">&gt;</span>
          <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Top node&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;t1&quot;</span> <span class="sy0">&gt;</span>
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Child node 1&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;c1&quot;</span> <span class="sy0">&gt;&lt;/</span>item<span class="sy0">&gt;</span>
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Child node 2&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;c2&quot;</span> <span class="sy0">&gt;&lt;/</span>item<span class="sy0">&gt;</span>
          <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
      <span class="sy0">/</span>cf_dhtmlXTree<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

Minimal possible tag syntax with server-side <acronym title="Extensible Markup Language">XML</acronym> is as follows:

</p>
<pre class="code javascript">      <span class="sy0">&lt;</span>cf_dhtmlXTree xmldoc<span class="sy0">=</span><span class="st0">&quot;tree.xml&quot;</span><span class="sy0">&gt;</span>
      <span class="sy0">&lt;/</span>cf_dhtmlXTree<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

Here is the example of ColdFusion tag for the tree with images specified:

</p>
<pre class="code javascript">      <span class="sy0">&lt;</span>cf_dhtmlXTree
          im1<span class="sy0">=</span><span class="st0">&quot;book.gif&quot;</span>
          im2<span class="sy0">=</span><span class="st0">&quot;books_open.gif&quot;</span>
          im3<span class="sy0">=</span><span class="st0">&quot;books_close.gif&quot;</span><span class="sy0">&gt;</span>
          <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Mystery &quot;</span> id<span class="sy0">=</span><span class="st0">&quot;mystery&quot;</span> <span class="kw3">open</span><span class="sy0">=</span><span class="st0">&quot;yes&quot;</span> <span class="sy0">&gt;</span>
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Lawrence Block&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb&quot;</span> <span class="sy0">&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;All the Flowers Are Dying&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_1&quot;</span> <span class="sy0">/&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;The Burglar on the Prowl&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_2&quot;</span> <span class="sy0">/&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;The Plot Thickens&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_3&quot;</span> <span class="sy0">/&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Grifters Game&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_4&quot;</span> <span class="sy0">/&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;The Burglar Who Thought He Was Bogart&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_5&quot;</span> <span class="sy0">/&gt;</span>
              <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Robert Crais&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc&quot;</span> <span class="sy0">&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;The Forgotten Man&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_1&quot;</span> <span class="sy0">/&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Stalking the Angel&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_2&quot;</span> <span class="sy0">/&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Free Fall&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_3&quot;</span> <span class="sy0">/&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Sunset Express&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_4&quot;</span> <span class="sy0">/&gt;</span>
                      <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Hostage&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_5&quot;</span> <span class="sy0">/&gt;</span>
               <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Ian Rankin&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;ir&quot;</span> <span class="sy0">&gt;&lt;/</span>item<span class="sy0">&gt;</span>
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;James Patterson&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;jp&quot;</span> <span class="sy0">&gt;&lt;/</span>item<span class="sy0">&gt;</span>
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Nancy Atherton&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;na&quot;</span> <span class="sy0">&gt;&lt;/</span>item<span class="sy0">&gt;</span>
          <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
      <span class="sy0">&lt;/</span>cf_dhtmlXTree<span class="sy0">&gt;</span>
&nbsp;</pre>
<p>

The following code snippet shows creation of the tree with Events Handlers, Checkboxes, and Drag-n-drop functionality:

</p>
<pre class="code javascript">      <span class="sy0">&lt;</span>cf_dhtmlXTree
          dragndrop<span class="sy0">=</span><span class="st0">&quot;true&quot;</span>
          checkboxes<span class="sy0">=</span><span class="st0">&quot;twoState&quot;</span>
          onSelect<span class="sy0">=</span><span class="st0">&quot;onClick&quot;</span>
          onCheck<span class="sy0">=</span><span class="st0">&quot;onCheck&quot;</span>
          onDrop<span class="sy0">=</span><span class="st0">&quot;onDrag&quot;</span><span class="sy0">&gt;</span>
              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Mystery &quot;</span> id<span class="sy0">=</span><span class="st0">&quot;mystery&quot;</span> <span class="kw3">open</span><span class="sy0">=</span><span class="st0">&quot;yes&quot;</span> <span class="sy0">&gt;</span>
                  <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Lawrence Block&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb&quot;</span> <span class="sy0">&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;All the Flowers Are Dying&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_1&quot;</span> <span class="sy0">/&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;The Burglar on the Prowl&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_2&quot;</span> <span class="sy0">/&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;The Plot Thickens&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_3&quot;</span> <span class="sy0">/&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Grifters Game&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_4&quot;</span> <span class="sy0">/&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;The Burglar Who Thought He Was Bogart&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;lb_5&quot;</span> <span class="sy0">/&gt;</span>
                  <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
                  <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Robert Crais&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc&quot;</span> <span class="sy0">&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;The Forgotten Man&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_1&quot;</span> <span class="sy0">/&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Stalking the Angel&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_2&quot;</span> <span class="sy0">/&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Free Fall&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_3&quot;</span> <span class="sy0">/&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Sunset Express&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_4&quot;</span> <span class="sy0">/&gt;</span>
                              <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Hostage&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;rc_5&quot;</span> <span class="sy0">/&gt;</span>
                  <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
                  <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Ian Rankin&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;ir&quot;</span> <span class="sy0">&gt;&lt;/</span>item<span class="sy0">&gt;</span>
                  <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;James Patterson&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;jp&quot;</span> <span class="sy0">&gt;&lt;</span>item<span class="sy0">&gt;</span>
                  <span class="sy0">&lt;</span>item text<span class="sy0">=</span><span class="st0">&quot;Nancy Atherton&quot;</span> id<span class="sy0">=</span><span class="st0">&quot;na&quot;</span> <span class="sy0">&gt;&lt;/</span>item<span class="sy0">&gt;</span>
              <span class="sy0">&lt;/</span>item<span class="sy0">&gt;</span>
      <span class="sy0">&lt;/</span>cf_dhtmlXTree<span class="sy0">&gt;</span>
&nbsp;</pre>
</div>

    <!-- wikipage stop -->
  </div>

  <div class="clearer">&nbsp;</div>

  
  <div class="stylefoot">

    <div class="meta">
      <div class="user">
              </div>
     <!-- <div class="doc">
        dhtmlxtree/syntax_templates.txt &middot; Last modified: 2009/07/30 12:56 (external edit)      </div>
    </div>-->

   
    <!--<div class="bar" id="bar__bottom">-->
      <!--<div class="bar-left" id="bar__bottomleft">-->
        <!---->
        <!--<form class="button btn_revs" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="revisions" /><input type="hidden" name="id" value="dhtmlxtree:syntax_templates" /><input type="submit" value="Old revisions" class="button" accesskey="o" title="Old revisions [O]" /></div></form>-->
      <!--</div>-->
      <!--<div class="bar-right" id="bar__bottomright">-->
        <!---->
        <!---->
        <!---->
        <!---->
        <!--<form class="button btn_login" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="login" /><input type="hidden" name="sectok" value="d1d83d2a206da1b3d2963d9527a76c1b" /><input type="hidden" name="id" value="dhtmlxtree:syntax_templates" /><input type="submit" value="Login" class="button" title="Login" /></div></form>-->
        <!--<form class="button btn_index" method="get" action="http://dhtmlx.com/dhxdocs/doku.php"><div class="no"><input type="hidden" name="do" value="index" /><input type="hidden" name="id" value="dhtmlxtree:syntax_templates" /><input type="submit" value="Index" class="button" accesskey="x" title="Index [X]" /></div></form>-->
        <!--<a class="nolink" href="#dokuwiki__top"><input type="button" class="button" value="Back to top" onclick="window.scrollTo(0, 0)" title="Back to top" /></a>&nbsp;-->
      <!--</div>-->
      <!--<div class="clearer"></div>-->
    <!--</div>-->

  </div>

  

</div>

<div class="footerinc">


</div>

<div class="no"><img src="/dhtmlx/_lab/wiki/lib/exe/indexer.php?id=dhtmlxtree%3Asyntax_templates&amp;1257950443" width="1" height="1" alt=""  /></div>
     <div class="footer">
        <div class="footer-logo"></div>
        <div class="copyright">Copyright © 1998-2009 DHTMLX LTD.<br />All rights reserved.</div>
            	    </div>
</body>
</html>
